import React, { useState } from 'react'
import './App.css'
import { Tabbar } from '@nutui/nutui-react'
import { Home, Find, User } from '@nutui/icons-react'
import { useNavigate, Outlet } from 'react-router-dom'
export default function App() {
  
  let navigate = useNavigate()
  const changeTab = (value) => {
    if(value == '0'){
      navigate('/app/home')
    }else if(value == '1'){
      navigate('/app/explore')
    }else if(value == '2'){
      navigate('/app/my')
    }
  }
  return (
    <div className='App'>
      <Outlet />
      <div className='App_tabBar'>
        <Tabbar
          defaultValue={0}
          onSwitch={(value) => {
            changeTab(value)
          }}
          inactiveColor="rgb(223,223,223)"
          activeColor="rgb(97,97,97)"
        >
          <Tabbar.Item icon={<Home width={24} height={24} />} />
          <Tabbar.Item icon={<Find width={24} height={24} />} />
          <Tabbar.Item icon={<User width={24} height={24} />} />
        </Tabbar>
      </div>
    </div>
  )
}
